<!--周建威-->
<!--2017.12.28-->
<template>
    <div>
        <el-col class="toolbar">
            <el-form :inline="true" >
                <el-form-item label="用户名">
                    <el-input v-model="filters.admin_name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="handleList" icon="el-icon-search">查询</el-button>
                    <el-button type="success" v-on:click="handleReset" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button type="primary"  @click="visible.addForm=true" icon="el-icon-circle-plus-outline">新增</el-button>

                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="list" highlight-current-row style="width: 100%;">
            <el-table-column type="index"  width="60">
            </el-table-column>
            <el-table-column prop="admin_name" label="账号" >
            </el-table-column>
            <el-table-column prop="admin_status" label="状态" >
                <span slot-scope="scope">
                    {{scope.row.admin_status==1?'启用':'禁用'}}
                </span>
            </el-table-column>
            <el-table-column prop="is_super" label="超级管理员" >
                  <span slot-scope="scope">
                    {{scope.row.is_super==1?'是':'否'}}
                </span>
            </el-table-column>
            <el-table-column prop="admin_description" label="描述" >
            </el-table-column>
            <el-table-column prop="admin_phone" label="手机" >
            </el-table-column>
            <el-table-column prop="role" label="权限组" >
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" >
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="text" @click="showEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页start -->
        <el-col :span="24" class="toolbar" v-show="1">
            <el-pagination layout="total, prev, pager ,next" :page-size="filters.pageSize"
                           :total="total"
                           @current-change="handlePageChange" >
            </el-pagination>
        </el-col>
        <!--分页end -->
        <!--新增表单 start-->
        <el-dialog  :visible.sync="visible.addForm" width="500px">
            <div slot="title" class="dialog-title">
                新增管理员
            </div>
            <el-form :model="addForm" label-width="90px" ref="addForm" :rules="adminFormRules">
                <el-form-item label="账号"  prop="admin_name" >
                    <el-input v-model="addForm.admin_name" auto-complete="off" ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="admin_password"  >
                    <el-input v-model="addForm.admin_password"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="admin_status"  >
                    <el-switch v-model="addForm.admin_status" active-color="#13ce66" inactive-color="#ff4949"
                               :active-value="1" :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="超级管理员" >
                    <el-switch v-model="addForm.is_super" active-color="#13ce66" inactive-color="#ff4949"
                               :active-value="1" :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="权限组" v-if="addForm.is_super==0">
                    <el-select v-model="addForm.role" placeholder="请选择">
                        <el-option
                                v-for="role in roles"
                                :key="role.name"
                                :label="role.name"
                                :value="role.name" >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述" prop="admin_description">
                    <el-input v-model="addForm.admin_description" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="admin_phone">
                    <el-input v-model="addForm.admin_phone" auto-complete="off" style="width: 200px"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible.addForm = false">取 消</el-button>
                <el-button type="primary" @click="handleAdd" :loading="visible.addLoading">确 定</el-button>
            </div>
        </el-dialog>
        <!--新增表单 end-->

        <!--编辑表单 start-->
        <el-dialog  :visible.sync="visible.editForm" width="500px">
            <div slot="title" class="dialog-title">
                修改管理员
            </div>
            <el-form :model="editForm" label-width="90px" ref="editForm" >
                <el-form-item label="账号"  prop="admin_name" >
                    <el-input v-model="editForm.admin_name" auto-complete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="admin_password"  >
                    <el-input v-model="editForm.admin_password"  auto-complete="off" placeholder="为空则不修改"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="admin_status"  >
                    <el-switch v-model="editForm.admin_status" active-color="#13ce66" inactive-color="#ff4949"
                               :active-value="1" :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="超级管理员" >
                    <el-switch v-model="editForm.is_super" active-color="#13ce66" inactive-color="#ff4949"
                               :active-value="1" :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="权限组" v-if="editForm.is_super==0">
                    <el-select v-model="editForm.role" placeholder="请选择">
                        <el-option
                                v-for="role in roles"
                                :key="role.name"
                                :label="role.name"
                                :value="role.name" >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述" prop="admin_description">
                    <el-input v-model="editForm.admin_description" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="admin_phone">
                    <el-input v-model="editForm.admin_phone" auto-complete="off" style="width: 200px"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible.editForm = false">取 消</el-button>
                <el-button type="primary" @click="handleEdit" :loading="visible.editLoading">确 定</el-button>
            </div>
        </el-dialog>
        <!--编辑表单 end-->
    </div>
</template>
<script>
  import {getAdminList, addAdmin, checkAdminName, getRoles, editAdmin} from '../../api/api'
  export default {
    data () {
      return {
        roles: [],
        list: [],
        filters: {
          page: 1,
          admin_name: '',
          pageSize: 10
        },
        total: 0,
        visible: {
          addForm: false,
          addLoading: false,
          editForm: false,
          editLoading: false
        },
        addForm: {
          admin_name: '',
          admin_password: '',
          admin_description: '',
          admin_phone: '',
          admin_status: 0,
          is_super: 0,
          role: ''
        },
        editForm: {
          admin_name: '',
          admin_password: '',
          admin_description: '',
          admin_phone: '',
          admin_status: 0,
          is_super: 0,
          role: '',
          admin_id: 0
        },
        adminFormRules: {
          admin_name: [
            {required: true, message: '请输入账号', trigger: 'blur'},
            {
              validator: (rules, value, callback) => {
                checkAdminName(value).then(data => {
                  if (parseInt(data.status) === 1) {
                    callback()
                  } else {
                    callback(new Error('已存在相同的用户名'))
                  }
                })
              },
              trigger: 'blur'
            }
          ],
          admin_password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      handlePageChange (page) {
        this.filters.page = page
        this.handleList()
      },
      // 列表
      handleList () {
        getAdminList(this.filters).then(res => {
          this.list = res.data
          this.total = res.totalCount
        })
      },
      handleReset () {
        this.filters = {
          page: 1,
          admin_name: '',
          pageSize: 10
        }
        this.handleList();
      },
      // 新增
      handleAdd () {
        this.$refs['addForm'].validate(valid => {
          if (valid) {
            this.visible.addLoading = true
            addAdmin(this.addForm).then(res => {
              if (parseInt(res.status) === 1) {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
                this.visible.addForm = false
                this.$refs['addForm'].resetFields()
                this.handleList()
              } else {
                this.$alert('新增失败', '提示', {type: 'error'})
              }
              this.visible.addLoading = false
            })
          }
        })
      },
      // roles列表
      handleRoles () {
        getRoles().then(res => {
          this.roles = res.data.roles
        })
      },
      // 显示编辑
      showEdit (admin) {
        this.editForm.admin_name = admin.admin_name
        this.editForm.admin_description = admin.admin_description
        this.editForm.admin_phone = admin.admin_phone
        this.editForm.admin_status = parseInt(admin.admin_status)
        this.editForm.is_super = parseInt(admin.is_super)
        this.editForm.role = admin.role
        this.editForm.admin_id = admin.admin_id
        this.editForm.admin_password = ''
        this.visible.editForm = true
      },
      // 编辑
      handleEdit () {
        this.visible.editLoading = true
        editAdmin(this.editForm).then(res => {
          if (parseInt(res.status) === 1) {
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.visible.editForm = false
            this.handleList();
          } else {
            this.$alert('编辑失败', '提示', {type: 'error'})
          }
          this.visible.editLoading = false
        })
      }
    },
    mounted () {
      this.handleList()
      this.handleRoles()
    }
  }
</script>
<style>

</style>